import type { Directive, DirectiveBinding } from 'vue';
const collapse: Directive = {
  mounted(el: HTMLElement, binding?: DirectiveBinding) {
    el.style.overflow = 'initial';
    el.style.transition = 'all .3s ease';

    const dom = document.createElement('div');
    dom.className = 'collapse-action';
    if (binding?.value) {
      dom.style.top = `${binding?.value}`;
    } else {
      dom.style.top = '35%';
    }

    dom.addEventListener('click', function () {
      dom.classList.toggle('is-collapse');
      el.classList.toggle('collapse-el');
    });

    el.appendChild(dom);
  }
};
export default collapse;